<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--
            分清楚
                  什么是props特性的标签属性
                  什么是非props特性的标签属性
                  所有的非props特性的标签属性  模板都会继承下来
        -->
       <atguigu-damu @click="handleC" class="red" damu="达姆" xfz="老男人"></atguigu-damu>
    </div>
</body>
<script>

    Vue.component("atguigu-damu",{
        props:["damu"],
        template:`
             <div @click="handleC" style="background: pink">
                <span>span1</span>
                <span>span2</span>
            </div>
         `,
        methods:{
            handleC(){
                this.$emit("click")
            }
        }
    })

    // 声明式编程
    var vm = new Vue({
        el:"#app",
        methods:{
            handleC(){
                console.log("app - handleC")
            }
        }
    })
</script>
</html>